<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>用户管理</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <Card style="margin-bottom: 10px">
          <div class="normal-list-page-hd clearfix">
            <Input
              placeholder="账号"
              class="mr-10"
              v-model="queryData.account"
              style="width: 150px"
              :clearable="true"
            />
            <Input
              placeholder="用户名"
              class="mr-10"
              v-model="queryData.name"
              style="width: 250px"
              :clearable="true"
            />
            <Button
              type="primary"
              custom-icon="iconfont icon-chaxun"
              size="small"
              @click="inQuire"
              >查询</Button
            >
          </div>
        </Card>
        <div class="normal-list-page-mod">
          <div class="mb-2">
            <!-- <Button-group>
              <Button custom-icon="iconfont icon-shanchusekuai" size="small" type="error" @click="batchDel">
                删除
              </Button>
            </Button-group> -->
          </div>
          <div class="normal-list-page-bd">
            <Table
              border
              :loading="list.loading"
              :columns="list.columns"
              :data="list.tableData"
              @on-selection-change="selectionChange"
            ></Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page
              class="fr"
              :total="queryData.totalRecord"
              :page-size="queryData.pageSize"
              :current="queryData.page"
              @on-change="changePage"
              @on-page-size-change="onPageSizeChange"
              show-elevator
              show-total
              show-sizer
            ></Page>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import UserApi from '@/api/zhcg/user.js'
import { Message } from 'iview'
export default {
  name: 'user',
  data () {
    return {
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 60,
          //   align: 'center'
          // },
          /** 开始自动生成 */
          { title: 'id', key: 'id', align: 'center', width: '100px' },
          { title: '账号', key: 'account', align: 'center', width: '240px' },
          { title: '姓名', key: 'name', align: 'center', width: '230px' },
          { title: '签名', key: 'description', minWidth: 100, align: 'center' },
          {
            title: '状态',
            key: 'status',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              if (params.row.status) {
                return h('div', [
                  h(
                    'span',
                    {
                      style: {
                        display: 'inline-block',
                        width: '100%',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        color: 'green'
                      },
                      domProps: {
                        title: '正常'
                      }
                    },
                    '正常'
                  )
                ])
              } else {
                return h('div', [
                  h(
                    'span',
                    {
                      style: {
                        display: 'inline-block',
                        width: '100%',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        color: 'red'
                      },
                      domProps: {
                        title: '冻结'
                      }
                    },
                    '冻结'
                  )
                ])
              }
            }
          },

          {
            title: '注册时间',
            key: 'createTime',
            align: 'center',
            width: '200px'
          }
          /** 自动生成结束 */
          //   {
          //     title: '操作',
          //     align: 'center',
          //     minWidth: 100,
          //     fixed: 'right',
          //     render: (h, params) => {
          //       return h('div', { class: 'action-group' }, [
          //         h(
          //           'Tooltip',
          //           {
          //             props: {
          //               placement: 'right',
          //               content: '删除'
          //             },
          //             style: {
          //               cursor: 'pointer'
          //             }
          //           },
          //           [
          //             h(
          //               'Button',
          //               {
          //                 props: {
          //                   type: 'error',
          //                   size: 'small'
          //                 },
          //                 style: {
          //                   marginRight: '5px',
          //                   padding: '1px 2px'
          //                 },
          //                 on: {
          //                   click: () => {
          //                     this.delData([params.row.id])
          //                   }
          //                 }
          //               },
          //               [
          //                 h('Icon', {
          //                   props: {
          //                     type: ' iconfont icon-shanchusekuai',
          //                     size: 18
          //                   }
          //                 })
          //               ]
          //             )
          //           ]
          //         )
          //       ])
          //     }
          //   }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      UserApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },

    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          MallBillApi.del({
            ids: ids
          }).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach((element) => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
